import { Canvas } from "@react-three/fiber";
import { Experience } from "./components/Experience";
import {Suspense} from 'react'
import {Physics} from '@react-three/rapier'
import {Bloom, EffectComposer} from '@react-three/postprocessing'
import {Leaderboard} from './components/Leaderboard.jsx'
import {Loader, SoftShadows} from '@react-three/drei'

function App() {
  return (
    <>
      <Loader />
      <Leaderboard />
      <Canvas
        shadows
        camera={{ position: [0, 30, 0], fov: 30, near: 2 }}
        dpr={[1, 1.5]} // optimization to increase performance on retina/4k devices
      >
        <color attach="background" args={['#242424']}/>
        <SoftShadows size={42} />
        {/* Physics */}
        <Suspense>
          <Physics>
            <Experience/>
          </Physics>
        </Suspense>
        {/* 预处理 disable the postprocessing on low-end devices */}
        <EffectComposer disableNormalPass>
          <Bloom luminanceThreshold={1} intensity={1.5} mipmapBlur />
        </EffectComposer>
      </Canvas>
    </>
  );
}

export default App;
